<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js"></script>
    <!-- <link rel="stylesheet" href="../css/public.css" media="all"> -->
    <link id="layuicss-layer" rel="stylesheet" href="../../layui/css/layui.css" media="all">
       <!-- <script src="../../js/jquery-1.9.1.min.js"></script> -->
</head>
<body>
    <div style="display: none;" id="saveOrUpdateDiv">
        <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="name" required="" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">简介</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="title" required="" lay-verify="required" placeholder="请输入员工名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">编码</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="sn" required="" lay-verify="required" placeholder="请输入编码" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="doSubmit1">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <div style="display: none;" id="UpdateDiv" class="">
        <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
            <div class="layui-form-item">
                <label class="layui-form-label">id：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="number" name="id" required="" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="name" required="" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
        
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="password" name="password" required="" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证密码：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="password" name="password" required="" lay-verify="required" placeholder="再输入一遍密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">Email：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="email" required="" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">年龄：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="number" name="age" required="" lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">超级管理员</label>
                <div class="layui-input-block">
                  <input type="radio" name="admin" value="1" title="是" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>是</div></div>
                  <input type="radio" name="admin" value="0" title="否"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>否</div></div>
                </div>
              </div>
        
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="doSubmit2">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        </div>
    
        <div class="box">
            <div class="layui-card">
                <div class="layui-card-header"><h2>员工管理</h2></div>
                <div class="" style="margin: 10px 10px 10px 10px;">
        
                    <fieldset class="fieldset" style="border: 1px solid darkgray;">
                        <legend style="font-size: large;">搜索信息</legend>
                        <div style="margin: 10px 10px 10px 10px">
                            <form class="layui-form layui-form-pane" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">关键字</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="keyword" id="demoReload" autocomplete="off" class="layui-input" placeholder="请输入姓名/邮箱">
                                        </div>
                                    </div>
                                     <button type="submit" class="layui-btn" id="searchBtn" data-type="reload"><i class="layui-icon"></i> 搜 索</button>
                                    <div class="layui-inline">
                                        
                                    </div>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                </div>
                <!-- 表格数据 -->
            <div class="layui-card-body">
                <table class="layui-table" id="table" lay-filter="test"></table>
            </div>
            <div id="pageDemo" style="text-align: center"></div>
              
    
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    
    <script>
        layui.use(["table","form","laypage"],function(){
            var table = layui.table;
            var form = layui.form;
            var $ =layui.jquery;
            var laypage = layui.laypage;
            var transfer = layui.transfer;
    
    
            //前端接口（URL）接受后端数据进行数据表格的渲染
            var tableIns = table.render({
                elem:'#table',
                toolbar: '#toolbarDemo',
                url:'http://localhost:8888/dicCon/list',
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                },
                cols:[[
                    {field:'select',type:"checkbox"},
                    {field:'title',title:'名称',sort:true},
                    {field:'sn',title:'编码'},
                    {field:'intro',title:'简介',sort:true},
                    {field:'操作',title:'操作',toolbar:'#barDemo',fixed:'right'}
                ]],
                page:{
                    layout:['prev','page','next','count']//,'limit','skip'
                    ,page:function(res){
                        return res.page
                    } //获取currentPage
                    // ,limit:function(res){
                    //     return res.limit
                    // }//获取pageSize
                    ,groups:10 //最多显示几个跳页按钮
                    ,first:true //显示首页
                    ,last:true  //显示尾页
                }
    
            });
            
            function formatState(role){
                if(role == 1){
                    return"<div style='color:red'>管理员</div>";
                }else if(role ==2){
                    return"<div style='color:green'>员工</div>";
                }
            }
            function formatState1(dept){
                if(dept == 1){
                    return"<div style='color:pink'>开发部</div>";
                }else if(dept ==2){
                    return"<div style='color:green'>策划部</div>";
                }
            }
            $(document).on('click','#searchBtn',function(data){
                // var sreachTxt= $("#demoReload");
                tableIns.reload('table', {
                    where: { //设定异步数据接口的额外参数，任意设
                        keyword:$('#searchBtn').val()
                        //…
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    }); //只重载数据
   

            })
  
            //头部工具栏
            table.on('toolbar(test)',function (obj){
                //打印事件名
                console.log(obj);
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
    
                // 获取事件名
                var eventName = obj.event;
                switch (eventName){
                    case "getCheckData":
                        var arr = checkStatus.data;
                        layer.alert(JSON.stringify(arr));
                        break;
    
                    case "getCheckLength":
                        var arr = checkStatus.data;
                        layer.msg("选中了"+arr.length+"条数据！");
                        break;
    
                    case "isAll":
                        var flag = checkStatus.isAll;
                        var str = flag ? '全选' : '未全选' ;
                        layer.msg(str);
                        break;
                    //若点击“新增”按钮，进入该事件，调用新增方法openAdd();
                    case "insert":
                        openAdd();
    
                    default:
                        break;
    
                };
            });
                //行工具栏事件
                table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                console.log();
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        console.log(data);
                        console.log(data.id);
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                        url:'http://localhost:8888/sys/deleteByEmployeeId', //删除数据接口
                        type: 'POST',
                        data: {
                            id:data.id
                        },
                        success:function(res){
                        alert("删除成功");

                    //重新加载数据表格
                    tableIns.reload();
                },
                    error:function(){
                        alert("删除失败");
                    },
                        })
                        // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //点击修改进入该事件，调用修改方法
                    openUpdate(data);
                    var obj = $("[name='id']").val();
                }
            });
              
            var url;
            var mainIndex;
            //新增方法（函数）
            function  openAdd(data){
                var url="/http://localhost:8888/sys/addEmployee";
                mainIndex=layer.open({
                    type:1,
                    title:'新增',
                    content:$("#saveOrUpdateDiv"),
                    area:['800px','400px'],
                    success:function (){
                        $("#dataFrm")[0].reset();
                        url="http://localhost:8888/sys/addEmployee";
                    }
                });
            }
            
            //修改方法（函数）
            function openUpdate(obj){
                // var obj = $("[name='id']").val();
                console.log(obj)
                var url="/http://localhost:8888/sys/updateEmployee";
                mainIndex=layer.open({
                    type:1,
                    title:'编辑',
                    content:$("#UpdateDiv"),
                    area:['800px','600px'],
                    success:function (index){
                        form.val("dataFrm",obj);
                        url="/http://localhost:8080/sys/updateEmployee";
                    }
                });
            }
            
            //模拟数据
            var data1 = [
            {"value": "1", "title": "市场经理"}
            ,{"value": "2", "title": "市场人员"}
            ,{"value": "3", "title": "角色3"}
            ,{"value": "4", "title": "角色4"}
            ,{"value": "5", "title": "角色5"}
            ,{"value": "6", "title": "角色6"}
            // ,{"value": "7", "title": "员工新增"}
            // ,{"value": "8", "title": "员工列表"}
            // ,{"value": "9", "title": "员工新增"}
            ]
            //修改表单穿梭框
            transfer.render({
                elem: '#test2'
                ,title: ['可选角色','新增角色']
                ,data: data1
                //,width: 150 //定义宽度
                ,height: 210 //定义高度
            })
          
            // 新增/修改表单监听提交
            form.on('submit(doSubmit1)', function(obj){
                //序列化/提交表单
                var params = $("#dataFrm").serialize();
                alert(params);
                var index = layer.msg("数据提交中，请稍后",{
                    icon:16,
                    time:false,
                    shade:0.8
                }); 
                var url="http://localhost:8888/dicCon/add";
                

                $.post(url,obj.field,function (result){
                    console.log("fangwangenc");
                    //判断是否成功
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                    
                    
                })
                // 关闭弹出层
                    layer.close(mainIndex);
    
                    //刷新表格
                    tableIns.reload();
            });
            // 新增/修改表单监听提交
            form.on('submit(doSubmit2)', function(obj){
                //序列化/提交表单
                // var params = $("#dataFrm").serialize();
                // alert(params);
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                url="http://localhost:8888/sys/updateEmployee";
                var data = $("[name='id']").val()
                $.post(url,obj.field,function (result){
                    // console.log("fangwangenc");
                    //判断是否成功
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                    
                    //关闭弹出层
                    // layer.close(mainIndex);
    
                    //刷新表格
                    // tableIns.reload();
                })
            });
    
        });
    
    </script>
    </body>
</html>